<template>
  <div class="container">
    <yd-navbar title="提现">
      <router-link to slot="left">
        <yd-navbar-back-icon @click.native="$router.back()"></yd-navbar-back-icon>
      </router-link>
      <router-link
        to="/mine/cashHistory"
        slot="right"
        style="font-size:.3rem;color:rgb(92, 92, 92)"
      >提现记录</router-link>
    </yd-navbar>
    <div style="padding:.15rem;">
      <div class="main">
        <div class="label">提现金额 :</div>
        <div class="card-box">
          <yd-input type="number" placeholder="请输入金额" v-model="form.amount" />
        </div>
      </div>
      <div class="main">
        <div class="label">卡号 :</div>
        <div class="card-box">
          <!-- <yd-input type="text" placeholder="请输入卡号" v-model="form.card" /> -->
          <select name id class="choose-card" v-model="form.card">
            <option value="请选择">请选择</option>
            <option :value="item" v-for="(item,index) in userCardList" :key="index">{{item}}</option>
          </select>
        </div>
      </div>
      <yd-button size="large" @click.native="cash" class="btn">提交</yd-button>
      <router-link to="/mine/bindCard" class="addCard">没有银行卡？前往添加 ></router-link>
    </div>
  </div>
</template>
<script>
import { cash, userBankCardList } from "@/api";
export default {
  name: "cash",
  data() {
    return {
      userCardList: [],
      form: {
        amount: "",
        card: "请选择"
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      userBankCardList().then(res => {
        this.userCardList = res.data;
      });
    },
    cash() {
      const { amount, card } = this.form;
      if (!amount) {
        this.$dialog.toast({
          mes: "请输入提现金额"
        });
      } else if (parseInt(amount) <= 0) {
        this.$dialog.toast({
          mes: "提现金额必须大于0"
        });
      } else if (!card || card === "请选择") {
        this.$dialog.toast({
          mes: "请选择卡号"
        });
      } else if (!/^\d{16}$/g.test(card)) {
        this.$dialog.toast({
          mes: "卡号格式不正确"
        });
      } else {
        cash().then(res => {
          this.$dialog.toast({
            mes: res.msg
          });
        });
      }
    }
  }
};
</script>
<style lang='less' scoped>
.main {
  display: flex;
  padding: 0.15rem;
  background: white;
  border-radius: 0.15rem;
  margin-top: 0.15rem;

  .label {
    width: 1.7rem;
    font-size: 0.36rem;
    margin-right: 0.4rem;
    text-align: right;
    text-align: justify;
    text-align-last: justify;
    font-weight: 500;
  }

  .card-box {
    flex: 1;

    /deep/ input {
      font-size: 0.36rem;
      font-weight: 500;
      color: gray;
    }
  }
}
.btn {
  font-size: 0.36rem;
  font-weight: 500;
  height: 0.8rem;
  letter-spacing: 0.05rem;
  border-radius: 0.15rem;
  margin-top: 0.2rem;
}

.addCard {
  display: block;
  color: #333;
  font-size: 0.28rem;
  padding: 0.15rem;
  font-weight: 500;
  text-align: right;
}

.choose-card {
  border: none;
  width: 100%;
  height: 100%;
  font-size: 0.36rem;
  font-weight: 500;
  color: gray;
}
</style>